<template>
	<gracePage headerBG="#FFFFFF" borderWidth="1px">
		<view class="grace-header-body" slot="gHeader">
			<text class="grace-header-icons grace-icons icon-arrow-left" @click.stop="goback"></text>
			<view class="grace-header-content grace-flex-center" @click="selectScope">
				<text>{{ menuText }}</text>
				<text class="iconfont icon-xialazhankai"></text>
			</view>
			<text class="publish" @click.stop="publish">发布</text>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<!--content -->
			<view class="release-content"><textarea name="content" placeholder="说一句话吧~" class="release-content-input" v-model="text" /></view>
			<!-- 图片选择  -->
			<view class="grace-h4 grace-space-between grace-margin-top">
				<text class="grace-black">点击可预览选好的图片</text>
				<text class="grace-black9">{{ selectedimgs.length }}/9</text>
			</view>
			<view class="grace-margin-top">
				<graceSelectImgAndUpload
					:maxFileNumber="9"
					ref="selectimgandupload"
					btnName="添加图片"
					@uploaded="imgLoaded"
					@change="imgsChange"
					@uploaderror="uploaderror"
					uploadServerUrl="http://您的上传服务器api地址"
				></graceSelectImgAndUpload>
			</view>
			<graceDialog borderRadius="10rpx" :isCloseBtn="false" :isBtns="false" :isTitle="false" :show="isShow" :closeDialog="closeDialog">
				<view class="dialog" slot="content">
					<view class="grace-flex-center grace-flex-vcenter"><image src="../../static/image/publish_dialog_img.png" mode="widthFix"></image></view>
					<view>1、涉及黄色，政治，广告及骚扰信息</view>
					<view>2、涉及人身攻击</view>
					<view>2、留联系方式，透露他人隐私</view>
					<view>一经合适将被封禁，情节严重者永久封禁</view>
					<button type="primary" @click.stop="closeDialog">朕知道了</button>
				</view>
			</graceDialog>
		</view>
	</gracePage>
</template>
<script>
let menuList = ['所有人可见', '仅自己可见'];
export default {
	data() {
		return {
			menuText: '所有人可见',
			text: '',
			selectedimgs: [],
			isShow: true,
			isShowSave:false
		};
	},
	onLoad: function() {},
	onBackPress(){
		if(!this.isShowSave && (this.text || this.selectedimgs.length != 0)){
			uni.showModal({
				title:'提示',
				content: '是否要保存为草稿',
				cancelText: '不保存',
				confirmText: '保存',
				success: res => {
					if(res.confirm){
						console.log("保存")
					}else{
						console.log("不保存")
					}
					this.isShowSave = true
					uni.navigateBack({});
				}
			});
			return true
		}
	},
	methods: {
		goback() {
			uni.navigateBack({});
		},
		publish() {
			console.log("发布")
		},
		selectScope() {
			uni.showActionSheet({
				itemList: menuList,
				success: res => {
					this.menuText = menuList[res.tapIndex];
				}
			});
		},
		// 选择图片时引起的数据变化
		imgsChange(imgs) {
			this.selectedimgs = imgs;
		},
		imgLoaded(res) {
			this.subtxt = '数据提交中';
			console.log(res);
			console.log(this.textareaVal);
			// 提交数据 图片信息保存在 res 内[ 数组形式 ]
			// 内容保存在 textareaVal
			//连接 api 提交即可
			//提交成功页面跳转
		},
		uploaderror() {
			console.log('上传过程遇到错误');
		},
		closeDialog() {
			this.isShow = false;
		}
	}
};
</script>
<style lang="stylus">
.publish
	font-size 32rpx
	margin 0 20rpx
.release-content
	margin-top 20rpx
	background-color #f7f7f7
	border-radius 10rpx
	.release-content-input
		height 180rpx
		font-size 28rpx
		width 650
		color #8e8080
		padding 25rpx
		line-height 46rpx
.dialog
	padding 30rpx
	view
		line-height 50rpx
	image
		margin-bottom 20rpx
		width 50%
	button
		margin-top 20rpx
		color #333333 !important
		background #FFE934 !important
</style>
